import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import Example from '../../../examples/enable-column-pinning';

<Head>
  <title>{'Column Pinning Guide - Material React Table V3 Docs'}</title>
  <meta
    name="description"
    content="How to use and customize the column pinning features of Material React Table"
  />
</Head>

## Column Pinning Feature Guide

Column pinning is a cool feature that lets users pin (freeze) columns to the left or right of the table. Pinned columns will not scroll horizontally with the rest of the columns so that they always stay visible to the user.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={new Set(['enableColumnPinning', 'onColumnPinningChange'])}
/>

### Relevant Column Options

<ColumnOptionsTable onlyOptions={new Set(['enablePinning'])} />

### Relevant State

<StateOptionsTable onlyOptions={new Set(['columnPinning'])} />

### Enable Column Pinning

Column pinning can simply be enabled by setting the `enableColumnPinning` table option to `true`.

```jsx
const table = useMaterialReactTable({
  data,
  columns,
  enableColumnPinning: true,
});

return <MaterialReactTable table={table} />;
```

### Pin (Freeze) Columns By Default

Columns can start out pinned in your table by setting the `columnPinning` states in `initialState` or `state`.

```jsx
const table = useMaterialReactTable({
  data,
  columns,
  enableColumnPinning: true,
  initialState: { columnPinning: { left: ['email'] } }, //pin email column to left by default
});

return <MaterialReactTable table={table} />;
```

### Apply Absolute Column Widths

You might consider using the `layoutMode: 'grid-no-grow'` table option to give all columns an exact width if you don't want the columns collapsing a little while scrolling. Some people like this subtle behavior, but others do not.

```jsx
const table = useMaterialReactTable({
  data,
  columns,
  enableColumnPinning: true,
  layoutMode: 'grid-no-grow',
});

return <MaterialReactTable table={table} />;
```

#### Column Pinning Example

<Example />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-pinning-examples)**
